<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg-container {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            /* width: 100%;
            height: 100%; */
            background-image: url('./img/star-bg.jpg');
            background-size: 100% 100%;
            overflow: hidden;
        }

        .bg-container img {
            position: absolute;
            top: 0;
            left: 800px;
            z-index: 10;
            transition: 0.5s linear;
            opacity: 0;
            /* animation: starAnimation 3s linear; */
        }

        /* @keyframes starAnimation {
            0% {
                left: 800px;
                top: 0;
                opacity: 0;
            }
            50% {
                left: 746px;
                top: 76px;
                opacity: 1;
            }
            100% {
                left: 692px;
                top: 152px;
                opacity: 0;
            }
        } */
    </style>
</head>
<body>
    <div class="bg-container">
        <button id="btn">启动</button>
        <img src="./img/star.png" alt="">
    </div>

    <script>
        var bgContainer = document.querySelector('.bg-container')
        var widthRange = document.querySelector('.bg-container').offsetWidth
        var heightRange = document.querySelector('.bg-container').offsetHeight
        var baseWidth = 108
        var baseHeight = 152

        function createStar () {
            for (var i = 0; i < 1; i++) {
                var img = document.createElement('img')
                var leftValue = Math.ceil(Math.random() * widthRange)
                var topValue = Math.ceil(Math.random() * heightRange)
    
                img.setAttribute('src', './img/star.png')
    
                // img.style.top = topValue + 'px'
                // img.style.left = leftValue + 'px'
                // img.style.opacity = 1
                // img.style.transition = '0.5s linear ' + Math.random() * 3 + 's'
    
                // 生成新的动画

                // 时间戳作为唯一标识
                // console.log(new Date().getTime() + Math.floor(Math.random() * 100000))

                var animateName = new Date().getTime() + Math.floor(Math.random() * 100000)

                // 动画的名称不能是纯数字
                var animationStr = `
                    @keyframes animate${animateName} {
                        0% {
                            left: ${leftValue}px;
                            top: ${topValue}px;
                            opacity: 0;
                        }
                        50% {
                            left: ${leftValue - baseWidth}px;
                            top: ${topValue + baseHeight}px;
                            opacity: 1;
                        }
                        100% {
                            left: ${leftValue - (baseWidth * 2)}px;
                            top: ${topValue + (baseHeight * 2)}px;
                            opacity: 0;
                        }
                    }
                `

                // dom节点，文本节点(text节点)
                var textNode = document.createTextNode(animationStr)

                document.querySelector('style').appendChild(textNode)

                img.style.animation = `animate${animateName} 3s linear ${Math.random() * 3}`;
                bgContainer.appendChild(img)
            }
        }

        function startAnimation () {
            var stars = document.querySelectorAll('.bg-container img')

            console.log('获取的流星', stars)
            for (var i = 0; i < stars.length; i++) {
                stars[i].style.top = parseFloat(stars[i].style.top) + (baseHeight * 2) + 'px'
                stars[i].style.left = parseFloat(stars[i].style.left) - (baseWidth * 2) + 'px'
                stars[i].style.opacity = 0
            }
        }

        // // 生成流行
        setInterval(function () {
            createStar()
        }, 1000);
        // // 执行动画
        // setTimeout(() => {
        //     startAnimation()
        // })

        // setInterval(() => {
        //     // 生成流行
        //     createStar()
        //     // 执行动画
        //     setTimeout(() => {
        //         startAnimation()
        //     })
        // }, 5000);


        // 定时器
        // 每五秒执行一次，生成10颗流星

        // 作业
        // 将transition版本，改成animation版本

    </script>
</body>
</html>